@(customer: Customer, tips: List[(Tip, Customer)], tipComments: List[(TipComment, Customer)], tipLikes: Map[Long, List[Long]])

@import helper._

<div id="tipsPnl" class="panel panel-primary">
  <div class="panel-heading">
  	<h4>Community Energy Saving Forum</h4>
  </div>
  <div class="panel-body plan-details">
    <a class="add-tip-lnk" href="#"><span>Ask question or add a tip</span></a>
    <div class="add-tip-block panel panel-default">
      <div class="panel-body " style="padding-bottom:10px">
        @form(action=routes.Tips.add(), 'id -> "tipFrm") {
          <input type="hidden" name="customerId" value='@customer.id' />
          <div class="form-group">
            <label for="tip-summary">Summary</label>
            <input type="text" class="form-control" id="tip-summary" name="summary" maxlength="200"/>
          </div>
          <div class="form-group">
            <label class="sr-only" for="tip-detail"></label>
            <textarea id="tip-detail" name="detail" class="form-control" rows="3" maxlength="10000"></textarea>
          </div>
          <input type="submit" class="btn primary add-tip-btn" value="Submit" />
          <a href="#" class="cancel-add-tip-lnk btn">Cancel</a>
        }  
      </div>
    </div>  

  	@if(tips.size > 0) {
  		@tips.map {
        case (tip, tipCustomer) => {
          <div id="tip-pnl-@tip.id" class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
              	@form(action=routes.Tips.like(), 'id -> ("likeFrm" + tip.id.get)) {
              		<input type="hidden" name="tipId" value='@tip.id' />  
              		<input type="hidden" name="customerId" value='@customer.id' />
                	<a href="#" class="like-lnk">
                		<span class="glyphicon glyphicon-thumbs-up"></span>
                	</a>	
                	<span id="like-txt-@tip.id" class="like-txt" style="padding-right:15px;">
                		@tipLikes.getOrElse(tip.id.get, List[Long]()).size likes
                	</span>
                  <a class="clearfix" data-toggle="collapse" data-target="#grp-collapse-@tip.id" href="#grp-collapse-@tip.id">
                  	@tip.summary
                    <span class="pull-right">@tipCustomer.name @tipCustomer.lastName</span>
                  </a>
                }
              </h4>
            </div>
            <div id="grp-collapse-@tip.id" class="panel-collapse collapse">
              <div class="panel-body">
              	<div style="padding-top:5px;padding-bottom:10px;">
                    @tip.detail
              	</div>
                <div class="@{if(customer.id.get != tip.customerId) "del-tip-btn-block"}" style="padding-bottom:10px;">
                  @form(action=routes.Tips.delete(), 'id -> ("del-tip-frm-" + tip.id.get)) {
                    <input type="hidden" name="tipId" value='@tip.id' />  
                    <input id="del-tip-btn-@tip.id.get" type="submit" class="btn primary del-tip-btn" value="Delete" />
                  }
                </div>
                <table id="comment-tbl-@tip.id" class="table" style="margin-left:20px;">
                  <tbody>
                    @for((tipComment, commentCustomer) <- tipComments.filter(_._1.tipId == tip.id.get)) { 
                        <tr style="background-color: rgb(247, 247, 249);">
                          <td>
                            <span style="color:#333">@tipComment.comment</span>
                            <span style="color:#428bca"> - @commentCustomer.name @commentCustomer.lastName</span>
                          </td>
                          <td>
                            <span class="@{if(customer.id.get != tipComment.customerId) "del-comment-btn-block"}">
                              @form(action=routes.Tips.deleteComment(), 'id -> ("del-comment-frm-" + tipComment.id)) {
                                <input type="hidden" name="commentId" value='@tipComment.id' />
                                <a id="del-comment-lnk-@tipComment.id" class="del-comment btn pull-right" data-toggle="tooltip" title="Delete Comment">
                                  <span class="glyphicon glyphicon-trash"></span>
                                </a>
                              }
                            </span>
                          </td>
                        </tr>
                      }
                  </tbody>
                </table>
                <a class="add-comment-lnk" href="#"><span>Add Comment</span></a>
                <div class="add-comment-block">
                  @form(action=routes.Tips.comment(), 'id -> ("commentFrm" + tip.id.get)) {
                    <input type="hidden" name="tipId" value='@tip.id' />  
                    <input type="hidden" name="customerId" value='@customer.id' />
                    <div id="add-comment-fg-@tip.id.get" class="form-group">
                      <label class="sr-only" for="add-comment-ta-@tip.id.get"></label>
                      <textarea id="add-comment-ta-@tip.id.get" name="comment" class="form-control" rows="3" maxlength="2000"></textarea>
                    </div>
                    <input id="add-comment-btn-@tip.id.get" type="submit" class="btn primary add-comment-btn" value="Add Comment" />
                    <a href="#" class="cancel-add-comment-lnk btn">Cancel</a>
                  }  
                </div>
              </div>
            </div>
          </div>
        }
      }  
  	} else {
  		There are no tips at this time
  	}
  </div>
</div>

<script type="text/javascript" src='@routes.Assets.at("templates/tip-comments.js")'></script>

<script type="text/javascript" charset="utf-8">
	$(function() {
    
    $('.like-lnk').bind('click', function(event) {
      var r = jsRoutes.controllers.Tips.like();
      //alert("type:" + r.type + " url:" + r.url + " form:" + $(this).closest('form').attr('id'));
      var updateSpan = $(this).next('span');
      $.ajax({
        type: r.type,
        url: r.url,
        data:  $(this).closest('form').serialize(),
        //data: { myfield: "John" },
        //dataType: "json",
        success: function(data) {
          console.log("Success:" + data);
          
          $(updateSpan).html(data);
        }, 
        error: function(data) {
          console.error("Error:" + data);
        }
      });
      return false;
    });

    $('.add-tip-lnk').bind('click', function(event) {
      $(this).hide();
      $('.add-tip-block').show();
      return false;
    });

    $('a.cancel-add-tip-lnk').click(function() {
      $('.add-tip-block').hide();
      $('.add-tip-lnk').show();
      return false;
    });

    $('.del-tip-btn').bind('click', function(event) {
      var r = jsRoutes.controllers.Tips.delete();
      $.ajax({
        type: r.type,
        url: r.url,
        data:  $(this).closest('form').serialize(),
        success: function(data) {
          console.log("Success:" + data.tipId);
          //alert("success:" + data.tipId);
          $("#tip-pnl-" + data.tipId).remove();
          
        }, 
        error: function(data) {
          console.error("Error:" + data);
          //alert("error:" + data);
        }
      });
      return false;
    });

    $('.add-comment-lnk').bind('click', function(event) {
      $(this).hide();
      $(this).next('div').show();
      return false;
    });

    $('a.cancel-add-comment-lnk').click(function() {
      var commentDiv = $(this).parent().closest('div');
      $(commentDiv).prev('a[href]').show();
      $(commentDiv).hide();
      return false;
    });

    $('.add-comment-btn').bind('click', function(event) {
      var tipId = $(this).attr('id').replace('add-comment-btn-', '')
      //alert("tipId:" + tipId);
      var commentDiv = $('#add-comment-fg-' + tipId);
      commentDiv.removeClass('has-error');
      if ($('#add-comment-ta-' + tipId).val() == "") {
        $(commentDiv).addClass('has-error')
      } else {
        var r = jsRoutes.controllers.Tips.comment();
        //var updateSpan = $(this).next('span');
        $.ajax({
          type: r.type,
          url: r.url,
          data:  $(this).closest('form').serialize(),
          success: function(data) {
            console.log("Success:" + data);
            //alert("success:" + data);
            dust.render('templates/tip-comments', data, function(err, out) {
              var trTest = $('#comment-tbl-' + data.tipId );
              //alert("trTest:" + $(trTest).attr('id'));
              // this below should work even if no rows in table
              $('#comment-tbl-' + data.tipId + ' > tbody:last').append(out);

            });
            $('#add-comment-ta-' + data.tipId).val("");
            rebindDeleteCommentBtn();
          }, 
          error: function(data) {
            console.error("Error:" + data);
            //alert("error:" + data);
          }
        });
      }
      return false;
    });

    rebindDeleteCommentBtn();

    $('#tipFrm').submit(function() {
      var isOk = true;
      
      var summaryDiv = $('#tip-summary').parent().closest('div');
      var detailDiv = $('#tip-detail').parent().closest('div');

      summaryDiv.removeClass('has-error');
      detailDiv.removeClass('has-error');
      
      if ($('#tip-summary').val() == "") {
        $(summaryDiv).addClass('has-error')
        isOk = false;
      }
      if ($('#tip-detail').val() == "") {
        $(detailDiv).addClass('has-error')
        isOk = false;
      }
      return isOk;
    });

  });


  function rebindDeleteCommentBtn() {
    $('.del-comment').bind('click', function(event) {
      var r = jsRoutes.controllers.Tips.deleteComment();
      $.ajax({
        context: this, 
        type: r.type,
        url: r.url,
        data:  $(this).closest('form').serialize(),
        success: function(data) {
          console.log("Success:" + data);
          $(this).closest('tr').remove();
        }, 
        error: function(data) {
          console.error("Error:" + data);
        }
      });
      return false;
    });
  }
    
</script> 